<%@ page import="per.hnvcam.searchext.data.model.Statistic" %>
<%@ page import="per.hnvcam.searchext.Constants" %>
<%--
  Created by IntelliJ IDEA.
  User: camhoang
  Date: 3/6/12
  Time: 9:58 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<%
   String pageTitle = "Statistic";
   String backToPage = "/index.jhtml";
   String backToLabel = "Search extension home";
   String configurationTile = "Statistic";
%>

<%-- HEADER --%>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <link rel="stylesheet" type="text/css" href="../css/administration/default.css">
   <title><%=pageTitle%>
   </title>

   <link rel="stylesheet" href="../css/RGraph/website.css" type="text/css" media="screen"/>

   <script type="text/javascript" src="../js/Google/plusone.js"></script>

   <script type="text/javascript" src="../js/RGraph/RGraph.common.core.js"></script>
   <script type="text/javascript" src="../js/RGraph/RGraph.common.effects.js"></script>
   <script type="text/javascript" src="../js/RGraph/RGraph.common.context.js"></script>
   <script type="text/javascript" src="../js/RGraph/RGraph.common.annotate.js"></script>
   <script type="text/javascript" src="../js/RGraph/RGraph.common.tooltips.js"></script>
   <script type="text/javascript" src="../js/RGraph/RGraph.common.zoom.js"></script>
   <script type="text/javascript" src="../js/RGraph/RGraph.common.resizing.js"></script>
   <script type="text/javascript" src="../js/RGraph/RGraph.common.key.js"></script>
   <script type="text/javascript" src="../js/RGraph/RGraph.meter.js"></script>
   <script type="text/javascript" src="../js/RGraph/RGraph.line.js"></script>
   <script type="text/javascript" src="../js/JQuery/jquery.min.js"></script>


   <script type="text/javascript">
        var displayStatistic = ${showStatistic};
        window.onload = function ()
        {
            if (!displayStatistic) {
               return;
            }

            var min = 0;
            var max = 100;

            var meter1 = new RGraph.Meter('statisticMeter', min, max, ${percentage});

            var grad1 = meter1.context.createRadialGradient(meter1.canvas.width / 2,meter1.canvas.height - 25,0,meter1.canvas.width / 2,meter1.canvas.height - 25,200);
            grad1.addColorStop(0, 'green');
            grad1.addColorStop(1, 'white');

            var grad2 = meter1.context.createRadialGradient(meter1.canvas.width / 2, meter1.canvas.height - 25,0,meter1.canvas.width / 2, meter1.canvas.height - 25,200);
            grad2.addColorStop(0, 'yellow');
            grad2.addColorStop(1, 'white');

            var grad3 = meter1.context.createRadialGradient(meter1.canvas.width / 2, meter1.canvas.height - 25,0,meter1.canvas.width / 2, meter1.canvas.height - 25,200);
            grad3.addColorStop(0, 'red');
            grad3.addColorStop(1, 'white');

            meter1.Set('chart.labels.position', 'inside');
            meter1.Set('chart.title', 'Latest statistic');
            meter1.Set('chart.title.vpos', 0.5);
            meter1.Set('chart.title.color', 'black');
            meter1.Set('chart.green.start', 90);
            meter1.Set('chart.green.end', 100);
            meter1.Set('chart.green.color', grad1);
            meter1.Set('chart.yellow.start', 70);
            meter1.Set('chart.yellow.end', 90);
            meter1.Set('chart.yellow.color', grad2);
            meter1.Set('chart.red.start', 0);
            meter1.Set('chart.red.end', 70);
            meter1.Set('chart.red.color', grad3);
            meter1.Set('chart.border', false);
            meter1.Set('chart.needle.linewidth', 5);
            meter1.Set('chart.needle.tail', true);
            meter1.Set('chart.tickmarks.big.num', 0);
            meter1.Set('chart.tickmarks.small.num', 0);
            meter1.Set('chart.segment.radius.start', 100);
            meter1.Set('chart.needle.radius', 80);
            meter1.Set('chart.needle.linewidth', 2);
            meter1.Set('chart.linewidth.segments', 15);
            meter1.Set('chart.strokestyle', 'white');
            meter1.Set('chart.text.size', 14);
            meter1.Set('chart.value.text', true);
            meter1.Draw();


            var line1 = new RGraph.Line('historicalStatistic', ${lineChartData1}, ${lineChartData2}, ${lineChartData3});
            line1.Set('chart.background.grid', true);
            line1.Set('chart.linewidth', 5);
            line1.Set('chart.gutter.left', 35);
            line1.Set('chart.hmargin', 5);

            if (!document.all || RGraph.isIE9up()) {
                line1.Set('chart.shadow', true);
            }
            line1.Set('chart.tickmarks', 'circle');
            line1.Set('chart.units.post', '');
            line1.Set('chart.colors', ['red', 'green', 'blue']);
            line1.Set('chart.background.grid.autofit', true);
            line1.Set('chart.background.grid.autofit.numhlines', 10);
            line1.Set('chart.labels', ${lineChartLabels});
            line1.Set('chart.title','Historical Statistic');
            line1.Set('chart.key', ${lineChartKeys});
            line1.Set('chart.tooltips', ${lineChartTooltip1}, ${lineChartTooltip2}, ${lineChartTooltip3});

            line1.Draw();
        }
    </script>
</head>
<body>
<table class="header_table">
   <tr>
      <td class="header_left">
         <a href="<c:url value='<%=backToPage%>'/>" class="backToClass">&#171;&nbsp;<%=backToLabel%>
         </a>
      </td>
      <td class="header_right">
         <span class="configuration_title"><%=configurationTile%></span>
      </td>
   </tr>
</table>
<table class="content_table">
   <tr>
      <td class="left_menu">
         <ul class="menu_item">
            <li>
               <a class="menu_item_link" href="<c:url value='/administration/home.jhtml' />">Configure Pages</a>
            </li>
            <li>
               <a class="menu_item_link" href="<c:url value='/administration/system.jhtml' />">Configure System</a>
            </li>
            <li>
               <a class="menu_item_link" href="<c:url value='/administration/hedge.jhtml' />">Configure Hedge Constants</a>
            </li>
            <li>
               <a class="menu_item_link" href="<c:url value='/administration/wordsSummary.jhtml' />">Words Summary</a>
            </li>
            <li>
               <a class="menu_item_link" href="<c:url value='/administration/rules.jhtml' />">Rule Set</a>
            </li>
            <li>
               <a class="menu_item_link" href="<c:url value='/administration/statistic.jhtml' />">Statistic</a>
            </li>
         </ul>
      </td>
      <td class="content">
<%-- END HEADER --%>

<%-- BODY --%>
<table width="50%" cellpadding="3" cellspacing="0" border="0">
   <tr>
      <td colspan="2">
         <h3><a href="<c:url value='/administration/statistic.jhtml?operation=OPERATION_GENERATE_STATISTIC'/>">Generate Statistic</a></h3>
      </td>
   </tr>
   <tr>
      <c:if test="${showStatistic}">
         <td class="stats_cell">
            <canvas id="statisticMeter" width="400" height="250">
               <div class="canvasfallback">[No canvas support]</div>
            </canvas>
         </td>
         <td class="stats_cell">
            <canvas id="historicalStatistic" width="600" height="250">[Please wait...]</canvas>
         </td>
      </c:if>
   </tr>
</table>

<%-- END BODY --%>

<%-- FOOTER --%>
<%@include file="footer.jsp" %>
<%-- END FOOTER --%>